<template>
  <div class="list">
      <div class="title">
          <h2>直播公开课</h2>
          <a href="">查看更多></a>
      </div>
      <ul>
          <li>
              <div class="left">
                  <img src="./../../assets/zhy/images/teacher0.png" alt="">
              </div>
              <div class="right">
                  <p>最强大脑·3天挑战极限记忆力</p>
                  <p class="name">卢菲菲</p><span>最强大脑</span>
                  <p>直播时间：今天19:30</p>
              </div>
          </li>
          <li>
              <div class="left">
                  <img src="./../../assets/zhy/images/teacher0.png" alt="">
              </div>
              <div class="right">
                  <p>最强大脑·3天挑战极限记忆力</p>
                  <p class="name">卢菲菲</p><span>最强大脑</span>
                  <p>直播时间：今天19:30</p>
              </div>
          </li>
          <li>
              <div class="left">
                  <img src="./../../assets/zhy/images/teacher0.png" alt="">
              </div>
              <div class="right">
                  <p>最强大脑·3天挑战极限记忆力</p>
                  <p class="name">卢菲菲</p><span>最强大脑</span>
                  <p>直播时间：今天19:30</p>
              </div>
          </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      msg: "hi",
    };
  },
};
</script>

<style scoped>
    .list{
        min-height: 1.7rem;
    }
    .list .title{
        height: .5rem;
        line-height: .5rem;
        margin-bottom: .1rem;
    }
    .list .title h2{
        float: left;
        margin-left: .1rem;
        font-size: .18rem;
        color: #333335;
        font-weight: 600;
    }
    .list .title a{
        float: right;
        margin-right: .1rem;
        text-decoration: none;
    }
    .list ul{
        list-style: none;
    }
    .list ul li{
        width: 3.55rem;
        height: 1rem;
        margin-bottom: .2rem;
    }
    .list .left{
        float: left;
        margin-left: .1rem;
    }
    .list .right{
        float: left;
        margin-left: .1rem;
        text-align: left;
    }
    .list .right .name{
        float: left;
        margin: .1rem 0;
    }
    .list .right span{
        display: block;
        float: left;
        width: .8rem;
        text-align: center;
        border: 1px solid orange;
        color: orange;
        background-color: #fff7f8;
        margin: .1rem 0px .1rem .1rem;
        text-align: left;
    }
    .list .right p:first-child{
        font-size: 14px;
    }
    .list .right p:last-child{
        clear: both;
    }
</style>

